<!--
我们本次使用var css
css可以取属性的值
颜色边框组件
leftTopColor：左上角
rightTopColor：右上角
leftBottomColor：左下角
rightBottomColor：右下角
borderColor:四边颜色
radiusColor:四角颜色
-->
<template>
  <div class="mc-color-border mc-on-shade" :style="{'--border-color':borderColor}">
    <div class="mc-color-border-body">
      <slot></slot>
    </div>
    <span :style="{'--left-top-color':leftTopColorValue}" class="mc-img-left-top"></span>
    <span :style="{'--left-bottom-color':leftBottomColorValue}"  class="mc-img-left-bottom"></span>
    <span :style="{'--right-top-color':rightTopColorValue}"  class="mc-img-right-top"></span>
    <span :style="{'--right-bottom-color':rightBottomColorValue}"  class="mc-img-right-bottom"></span>
  </div>
</template>

<script>

export default {
  name: 'mc-color-border',
  data () {
    return {

    }
  },
  props:
    {
      'borderColor':{type:String,default:'#1a3f72'},
      'leftTopColor':{type:String,default:null},
      'rightTopColor':{type:String,default:null},
      'leftBottomColor':{type:String,default:null},
      'rightBottomColor':{type:String,default:null},
      'radiusColor':{type:String,default:'#00F7FF'},
    },
  computed:{
    leftTopColorValue: function (){
      return this.leftTopColor||this.radiusColor;
    },
    rightTopColorValue: function (){
      return this.rightTopColor||this.radiusColor;
    },
    leftBottomColorValue: function (){
      return this.leftBottomColor||this.radiusColor;
    },
    rightBottomColorValue: function (){
      return this.rightBottomColor||this.radiusColor;
    },
  },
  components: {
  },
  mounted () {
    if(window.iframeUi&&window.iframeUi.jsonFactory){
        var dragMcPane = window.iframeUi.jsonFactory.api().pubGetDragMcPaneName();
        var domElm = $(this.$el);
        var inner = domElm.find(".mc-color-border-body");
        if(inner.length>0){
          domElm.removeClass(dragMcPane);
          inner.addClass(dragMcPane);
        }
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.mc-color-border {
  position: relative;
  border: 2px solid var(--border-color);
  box-sizing: border-box;
  border-radius: 6px;
}

.mc-color-border .mc-color-border-body{
  height: 100%;
  width: 100%;
  padding: 2px;
  box-sizing: border-box;
/*  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;*/

}
.mc-color-border .mc-img-left-top {
  position: absolute;
  width: 27px;
  height: 23px;
  top: -3px;
  left: -3px;
  border-left: 3px solid var(--left-top-color);
  border-top: 3px solid var(--left-top-color);
  border-top-left-radius: 8px;
}
.mc-color-border .mc-img-left-bottom {
  position: absolute;
  width: 27px;
  height: 23px;
  left: -3px;
  bottom: -3px;
  border-left: 3px solid var(--left-bottom-color);
  border-bottom: 3px solid var(--left-bottom-color);
  border-bottom-left-radius: 8px;
}
.mc-color-border .mc-img-right-top {
  position: absolute;
  width: 27px;
  height: 23px;
  top: -3px;
  right: -3px;
  border-right: 3px solid var(--right-top-color);
  border-top: 3px solid var(--right-top-color);
  border-top-right-radius: 8px;
}
.mc-color-border .mc-img-right-bottom {
  position: absolute;
  width: 27px;
  height: 23px;
  bottom: -3px;
  right: -3px;
  border-right: 3px solid var(--right-bottom-color);
  border-bottom: 3px solid var(--right-bottom-color);
  border-bottom-right-radius: 8px;
}
.mc-color-border{
  width: 100%;
  height: 100%;
}

</style>
